import React, { Component } from "react";
import { Header } from "semantic-ui-react";
import * as websocket from "@utils/vedio";
import webrtcImage from "@assert/webrtc.png";
class Vedio extends Component {
  constructor(props) {
    super(props);
    let state = { username: "test", selfVedio: "", otherVedio: "" };
    this.otherVedio = React.createRef();
    this.selfVedio = React.createRef();
  }
  handleSubmit() {
    // 提交数据;
    console.log(this.state);
    this.setState({ username: this.props.login.data.username });
    websocket.register(this.props.login.data.username);
    // this.props.init(this.state);
  }
  componentDidMount() {
    this.setState({ selfVedio: this.selfVedio.current });
    this.setState({ otherVedio: this.otherVedio.current });
    console.log(this.selfVedio);
    websocket.setVedio(this.selfVedio.current, this.otherVedio.current);
    if (this.props.login.data) {
      websocket.init();
    }
  }
  componentWillUnmount() {
    //this.props.destory(this.state);
  }

  render() {
    const container = {
      position: "relative"
    };
    const vedio = {
      display: "block",
      fontSize: "14px",
      lineHeight: "1.42857143",
      color: "#555",
      backgroundColor: "#fff",
      backgroundImage: "none",
      border: "1px solid #ccc",
      borderRadius: "4px",
      boxShadow: "inset 0 1px 1px rgba(0, 0, 0, .075)",
      transition: "border-color ease-in-out .15s, box-shadow ease-in-out .15s"
    };
    const selfVedioStyle = {
      width: "35%",
      height: "50%",
      padding: 0,
      position: "absolute",
      top: 0,
      right: 0,
      cursor: "pointer",
      zIndex: 10,
      padding: 0
    };
    const otherVedioStyle = {
      width: "100%",
      height: "100%",
      top: 0,
      left: 0,
      zIndex: 1
    };
    return (
      <div>
        <Header
          onClick={this.handleSubmit.bind(this)}
          as="h3"
          dividing
          style={{
            width: "100%",
            height: "2.1rem",
            display: "flex",
            alignItems: "center"
          }}
        >
          Comments
        </Header>
        <div style={container}>
          <div>
            <video
              style={{ ...otherVedioStyle, ...vedio }}
              ref={this.otherVedio}
              autoPlay
              // controls
              poster={webrtcImage}
            />
          </div>
          <div>
            <video
              style={{ ...selfVedioStyle, ...vedio }}
              ref={this.selfVedio}
              autoPlay
              // controls
              poster={webrtcImage}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default Vedio;
